//定义一个轮播图类
class Carousel {
    constructor(tag) {
        // console.log(tag);
        //1.获取目标元素
        this.tag = document.querySelector(tag);
        //2.获取左右按钮
        this.lBtn = this.tag.querySelector('.l_btn');
        this.rBtn = this.tag.querySelector('.r_btn');
        // console.log(this.lBtn, this.rBtn);//调试
        //获取li列表
        this.list = this.tag.querySelectorAll('.img_box>ul>li');
        //获取所有li要移动的类名
        this.listClassName = ['list01', 'list02', 'list03', 'list04'];
        //获取圆点
        this.dotBox = this.tag.querySelectorAll('.dot_box>span')
            // console.log(this.dotBox);

        //触发绑定事件
        this.eventFn()

        //初始化变量
        this.index = 0;
        //获取上一个初始化变量
        this.lastIndex = 0;

        this.timer;
        this.timeFn();
        // this.mouseFn();
        this.dotFn();
        // this.dotActiveFn();
    };

    //li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });

    };

    eventFn() {
        //点击右按钮
        this.rBtn.addEventListener('click', () => {
            //操作数组,是会改变原数组
            //第一步先将数组第一个值push到最后
            this.listClassName.push(this.listClassName[0]);
            //第二步shift删除数组的第一个值
            this.listClassName.shift();
            //li全部重新设置类名
            this.restListFn()
        })

        //点击左边按钮
        this.lBtn.addEventListener('click', () => {
            //首先首端添加最后一张
            this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
            //末端删除第一张
            this.listClassName.pop(this.listClassName[0]);

            //li全部重新设置类名
            this.restListFn()

        });


    };

    //右边按钮的封装函数
    arrowRFn() {
        // console.log(this);//Carousel{}
        this.listClassName.push(this.listClassName[0]);
        this.listClassName.shift();
        this.restListFn()
    };

    // 小圆点点击事件
    dotFn() {
        // console.log(this);//调试Carousel
        let _this = this;
        // console.log(_this.dotBox);//调试NodeList(4) [span.dot_active, span, span, span]
        _this.dotBox.forEach(function(el, idx) {

            el.addEventListener("click", function() {
                console.log(_this); //调试Carousel

                // 小圆点切换类名
                _this.dotBox[_this.lastIndex].classList.remove("dot_active");
                _this.dotBox[idx].classList.add("dot_active");

                _this.lastIndex = idx;

                console.log(_this.list[idx]);

            })
        });
    }



    // 自动轮播
    timeFn() {
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
            this.arrowRFn()
        }, 1500);
    };

    //鼠标移入移出
    // mouseFn() {
    //     // 鼠标移入box区域，停止定时器
    //     this.tag.addEventListener("mouseenter", function() {
    //         clearInterval(this.timer);
    //     });
    //     // 鼠标移出box区域，开始定时器
    //     this.tag.addEventListener("mouseleave", function() {
    //         setTimeout(this.timeFn(), 1500)
    //     });
    // }


}